<template>
  <div class="box">
    <van-nav-bar style="width: 100%" title="我的" placeholder fixed />
    <div class="user">
      <img
        class="txImg"
        src="https://m.moguvet.com/_nuxt/img/5786c21.png"
        alt=""
      />
      <h1 @click="$router.push('/login')">登录/注册</h1>
    </div>
    <div class="two">
      <div>
        <h1>0</h1>
        <p>我的医生</p>
      </div>
      <div>
        <h1>0</h1>
        <p>优惠券</p>
      </div>
    </div>

    <div class="wz">
      <h2>我的问诊</h2>
      <van-grid class="wzCards" square :border="false">
        <van-grid-item
          v-for="value in wz"
          :key="value"
          :icon="value.img"
          :text="value.title"
        >
        </van-grid-item>
        <img src="https://cdn.moguvet.com/custom/front/c/minetxwz.png" alt="" />
      </van-grid>
      <div>
        <p v-for="item in cf" :key="item.title">
          <img class="dImg" :src="item.img" alt="" />
          <span>{{ item.title }}</span>
        </p>
      </div>
    </div>

    <div class="wz">
      <h2>健康馆订单</h2>
      <van-grid square :border="false">
        <van-grid-item
          v-for="value in health"
          :key="value"
          :icon="value.img"
          :text="value.title"
        />
      </van-grid>
    </div>

    <div class="wz">
      <h2>更多服务</h2>
      <van-grid square :border="false">
        <van-grid-item
          v-for="value in more"
          :key="value"
          :icon="value.img"
          :text="value.title"
        />
      </van-grid>
    </div>

    <div class="wz">
      <h2>常用工具</h2>
      <van-cell
        v-for="item in tools"
        :key="item"
        :icon="item.img"
        is-link
        :title="item.title"
        @click="show = true"
      />
      <van-action-sheet v-model:show="show" title="标题">
        <div class="content">内容</div>
      </van-action-sheet>
    </div>

    <div class="dibu">
      <img
        class="cy"
        src="https://m.moguvet.com/_nuxt/img/b07a2d1.png"
        alt=""
      />
      <van-divider
        style="color: #999; font-size: 14px; margin-bottom: 30px; width: 100%"
        >严格质控 双重审核 专业安全</van-divider
      >
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const show = ref(false);
let wz = ref([
  { img: "https://m.moguvet.com/_nuxt/img/45691a8.png", title: "图文问诊" },
  { img: "https://m.moguvet.com/_nuxt/img/56a9c26.png", title: "电话问诊" },
  { img: "https://m.moguvet.com/_nuxt/img/7916e0c.png", title: "开药问诊" },
  { img: "https://m.moguvet.com/_nuxt/img/5002f7c.png", title: "云诊室" },
]);
let cf = ref([
  { img: "https://m.moguvet.com/_nuxt/img/6654477.png", title: "我的处方" },
  { img: "https://m.moguvet.com/_nuxt/img/a847e38.png", title: "宠物档案" },
]);
let health = ref([
  {
    img: "https://cdn.moguvet.com/custom/front/shop/daizhifu.png",
    title: "待付款",
  },
  {
    img: "https://cdn.moguvet.com/custom/front/shop/daifahuo.png",
    title: "待发货",
  },
  {
    img: "https://cdn.moguvet.com/custom/front/shop/daishouhuo.png",
    title: "待收货",
  },
  {
    img: "https://cdn.moguvet.com/custom/front/shop/tuikuan.png",
    title: "退款/售后",
  },
]);

let more = ref([
  { img: "https://m.moguvet.com/_nuxt/img/86d1a7a.png", title: "购药订单" },
  { img: "https://m.moguvet.com/_nuxt/img/3d35cd1.png", title: "收货地址" },
  { img: "https://m.moguvet.com/_nuxt/img/840100a.png", title: "宠医卡" },
  { img: "https://m.moguvet.com/_nuxt/img/5f6acb5.jpg", title: "蘑菇豆" },
]);

let tools = ref([
  { img: "https://m.moguvet.com/_nuxt/img/3f19421.png", title: "用户协议" },
  { img: "https://m.moguvet.com/_nuxt/img/72ce859.png", title: "设置" },
  {
    img: "https://m.moguvet.com/_nuxt/img/53d4949.png",
    title: "联系客服(工作日 9:30-18:30)",
  },
]);
</script>
<style scoped>
.box {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.user {
  display: block;
  width: 92%;
  height: 120px;
}
.txImg {
  width: 80px;
  display: inline-block;
  margin: 10px 20px;
  float: left;
}
.user h1 {
  display: inline-block;
  margin-top: 20px;
  float: left;
}
.two {
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.two div {
  width: 50%;
  height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.two p {
  margin-top: -15px;
  font-size: 30px;
}
.wz {
  width: 100%;
  box-sizing: border-box;
}
.wzCards {
  width: 100%;
  position: relative;
}
.wzCards img {
  width: 300px;
  height: 48px;
  position: absolute;
  top: -22px;
  right: 100px;
}
.wz h2 {
  margin: 30px 20px;
  box-sizing: border-box;
}
.wz div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wz p {
  width: 60%;
  height: 100px;
  margin: 20px 30px;
  font-size: 27px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9fbfc;
}
.dImg {
  width: 35px;
  height: 30px;
}
.cy {
  width: 250px;
  height: 60px;
}
.dibu {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 40px 0;
}
</style>
